<template>
  <div class="current pt-re">
    <div class="userInfo"  @click="itemClick()" >
      <div class="avator">
        <img
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          alt=""
        />
      </div>
      <div class="self-info">
        <div class="name">陈波</div>
        <div class="service">区域服务商</div>
      </div>
      <div class="arrow-right">
        <van-icon name="arrow" size="20" color="#979797" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
const itemClick = (hoseInfo) => {
  router.push({
    path: '/userCenter',
  })
}
</script>

<style lang="scss" scoped>
.current {
  // background: #2CB9A4;
  background: linear-gradient(
    to bottom,
    #ffffff 10%,
    rgba(44, 185, 164, 0.1),
    #fff
  );
  background-size: 100% 100%;
  height: 250px;
  background-repeat: no-repeat;
  padding: 5rpx 20rpx;
  .userInfo {
    position: relative;
    padding: 0px 20px;
    top: 20%;
    display: flex;
    align-items: center;
    .avator {
      height: 60px;
      width: 60px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .self-info {
      margin-left: 20px;
      .name {
        color: #081738;
        font-family: PingFang SC;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
      }
      .service {
        color: #545454;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        margin-top: 10px;
      }
    }
    .arrow-right {
      flex: 1;
      text-align: right;
    }
  }
}
</style>